<template>
	<view class="main" style="background-color: #FAFAFA;">
		<u-line></u-line>
		<u-overlay :show="passValue" :mask-click-able="false" :opacity="0.2">
			<view class="warp" style="display: flex;justify-content: center;align-items: center;margin-top: 39vh;">
				<view style="width: 130px;height: 130px;background-color: #000;border-radius: 10px;display: flex;align-items: center;justify-content: center;opacity:0.7">
					<u-loading-icon mode="semicircle" size="60" color="#FFF" :vertical="true" text="正在加载" textColor="#FFF"></u-loading-icon>
				</view>
			</view>
		</u-overlay>
		<view class="detail_container" v-show="!passValue">
			<view class="detail_content" style="background-color: #FFFFFF;">
				<view class="detail_title" style="padding: 10px;font-size: 16px;font-weight: 800;">
					{{"复核详情"}}
				</view>
				<u-line></u-line>
				<view class="detail_x" style="padding: 0px 10px 10px 10px;">
					<view class="detail_tag" v-for="(xtag,index) in data" :key="index">
						<view class="tag_1" v-show="index!=3 && index!=4 && index!=7 && index!=8" style="display: flex;align-items: flex-start;font-size: 14px;margin-top: 10px;">
							<view class="1a" style="color: #999;width: 80px;">
								{{xtag.name}}
							</view>
							<view class="1b" style="color: #333;flex:1;text-align: right;">
								{{xtag.value}}
							</view>
						</view>
						<view class="tag_2" v-show="index==3 || index==4" style="display: flex;align-items: center;justify-content: space-between;font-size: 14px;margin-top: 10px;">
							<view class="2a" style="color: #999;">
								{{xtag.name}}
							</view>
							<view class="2b" style="color: #333;">
								{{xtag.value}}
							</view>
						</view>
						<view class="tag_3" v-show="(index==7 || index==8) && isStauts">
							<view class="tag_31" v-show="index==7" style="display: flex;align-items: flex-start;font-size: 14px;margin-top: 10px;">
								<view class="1a" style="color: #999;width: 80px;">
									{{xtag.name}}
								</view>
								<view class="1b" style="color: #333;flex:1;text-align: right;">
									{{xtag.value}}
								</view>
							</view>
							<view class="tag_32" v-show="index==8" style="margin-top: 10px;">
								<view class="2a" style="color: #999;font-size: 14px;">
									{{xtag.name}}
								</view>
								<view class="images" v-for="(img,indexI) in imgList" :key="indexI" style="padding: 10px 10px 0px 10px;">
									<img :src="img.url" style="width: 100%;"/>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { pipecheckDetail, } from '@/common/api.js'
	export default{
		onLoad:function(option){
			uni.setNavigationBarTitle({
			    title: option.title
			})
			this.id = option.id
		},
		onShow() {
			document.body.style.overflow = 'auto'
			this.getGwzdDetailById()
		},
		data(){
			return{
				id:'',
				data:[
					{name:'项目名称',value:''},
					{name:'设备编号',value:''},
					{name:'监测地址',value:''},
					{name:'监测总流量(m³)',value:''},
					{name:'最大瞬时流量(m³/h)',value:''},
					{name:'开始时间',value:''},
					{name:'复核状态',value:''},
					{name:'复核说明',value:''},
					{name:'附件',value:''},
				],
				isStauts:false,
				imgList:[],
				passValue:true,
			}
		},
		methods:{
			getGwzdDetailById(){
				pipecheckDetail({id:this.id}).then(res => {
					if(res.sffh == '1'){
						this.isStauts = true
						this.data[7].value = res.fhsm
						this.imgList = res.fhfjList
					}
					this.data[0].value = res.xmmc
					this.data[1].value = res.sbbh
					this.data[2].value = res.jcdz
					this.data[3].value = res.jczll
					this.data[4].value = res.maxll
					this.data[5].value = res.kssj
					this.data[6].value = res.sffh == '0' ? '未复核' : '已复核'
					this.passValue = false
				})
			}
			
		},
		mounted(){
		}
	}
</script>

<style>
	
</style>